<template>
  <div class="calendar">
    <!-- <div class="left"><el-calendar v-model="value" /></div> -->
    <div class="left">
      <el-calendar>
        <template #date-cell="{ data }">
          <div @click="clickDay(data)" class="box">
            <p>{{ data.day.split('-')[2] }}</p>
            <div v-for="item in list" :key="item.id">
              <p v-if="item.dateTime === data.day">
                <span class="workTime">{{ item.hours }}h</span>
              </p>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <div class="right">
      <div class="header">
        <el-icon class="icon-left" @click="yesterday()"><ArrowLeftBold /></el-icon>
        <span>{{ currentDay }}</span
        ><span>{{ formatWeek(currentWeek) }}</span>
        <el-icon class="icon-right" @click="tomorrow()"><ArrowRightBold /></el-icon>
      </div>
      <div class="todo-body">
        <el-form :model="form" label-width="auto" style="max-width: 600px" :disabled="isCompleted">
          <el-form-item label="加班工时">
            <el-input v-model="form.hours" />
          </el-form-item>
          <el-form-item label="工作内容">
            <el-input v-model="form.description" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs' // ES 2015
import { ref, computed, onMounted, onUpdated } from 'vue'
import { getWork, addWork } from '@/api/meeting'

const currentDay = ref(dayjs().format('YYYY-MM-DD')) //当前日期
const currentWeek = ref(dayjs(currentDay.value).day()) //当前星期 0,1,2,3,4,5,6
//前一天
const yesterday = () => {
  let day = dayjs(currentDay.value).subtract(1, 'days').format('YYYY-MM-DD')
  currentWeek.value = dayjs(day).day()
  currentDay.value = day
}
//后一天
const tomorrow = () => {
  let day = dayjs(currentDay.value).add(1, 'days').format('YYYY-MM-DD')
  currentWeek.value = dayjs(day).day()
  currentDay.value = day
}
// 星期格式化
const formatWeek = (value) => {
  let arr = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'])
  return arr.value[value]
}

const form = ref({ hours: '', description: '' })
const list = ref([])
const isCompleted = ref(false)
const clickDay = (data) => {
  console.log(data)
  currentDay.value = data.day
  if (data.type === 'current-month') {
    // 当月  判断当前点击的那天有没有填工时
    for (let item of list.value) {
      if (item.dateTime === data.day) {
        form.value.hours = item.hours
        form.value.description = item.description
        isCompleted.value = true
        break
      } else {
        isCompleted.value = false
        form.value.hours = ''
        form.value.description = ''
      }
    }
  } else {
    // 非当月 需要查询下数据
    const star = dayjs(data.day).startOf('month').format('YYYY-MM-DD HH:mm:ss')
    const end = dayjs(data.day).endOf('month').format('YYYY-MM-DD HH:mm:ss')
    getData(star, end)
  }
}
const getData = async (star, end) => {
  let param = { startTime: star, endTime: end }
  const res = await getWork(param)
  if (res.code === 200) {
    let arr = res.data
    arr.forEach((item) => {
      item.dateTime = dayjs(item.dateTime).format('YYYY-MM-DD')
    })
    list.value = arr
  }
}
const submitForm = async () => {
  console.log(form.value)
  if (form.value.hours === '' || form.value.description === '') {
    ElMessage.error('请填写工时和描述')
    return false
  }
  let param = { ...form.value, dateTime: dayjs(currentDay.value).format('YYYY-MM-DD HH:mm:ss') }
  const res = await addWork(param)
  if (res.code === 200) {
    const star = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
    const end = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
    getData(star, end)
  }
}
onMounted(() => {
  console.log('组件挂载完成！')
  const star = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  const end = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
  getData(star, end)
})
</script>
<style lang="scss" scoped>
.calendar {
  display: flex;
  .left {
    width: 500px;
  }
  .right {
    width: 500px;
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
    }
    .icon-left {
      color: red;
      font-size: 20px;
      margin-right: 10px;
    }
    .icon-right {
      color: red;
      font-size: 20px;
      margin-left: 10px;
    }
    .todo-body {
      width: 100%;
      height: 376px;
      border: 1px solid #ddd;
    }
  }
  .box {
    width: 100%;
    height: 100%;
    .workTime {
      color: red;
      border: 1px solid #ddd;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>
